<template>
  <div class="content_wrapper">
    <div class="login-content">
      <!-- 左侧图 -->
      <div class="login-picture"></div>
      <!-- 登录框 -->
      <div class="login-tab">
        <div class="login-box">
          <el-tabs v-model="activeTab" stretch @tab-click="handleTabClick">
            <el-tab-pane label="微信登录" name="wechat">
              <div class="tab-content fixed-height">
                <div class="qr-code-container">
                  <div class="wrp-code">
                    <img src="https://open.weixin.qq.com/connect/qrcode/021UPiaX0gZ01w3X" alt="微信登录二维码">
                  </div>
                  <p class="qr-tip">请使用微信扫描二维码登录</p>
                  <p class="qr-tip">微信与QQ账号的邮箱数据不互通</p>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="QQ登录" name="qq">
              <div class="tab-content fixed-height">
                <div class="login-header">
                  <h3>密码登录</h3>
                  <p class="quick-login-tip">推荐使用快捷登录，防止盗号。</p>
                </div>

                <el-form class="login-form">
                  <el-form-item>
                    <el-input v-model="account" placeholder="请输入QQ号/邮箱/手机号" clearable />
                  </el-form-item>

                  <el-form-item>
                    <el-input v-model="password" type="password" placeholder="请输入密码" show-password />
                  </el-form-item>

                  <el-button type="primary" class="login-btn">登录</el-button>
                </el-form>

                <div class="login-actions">
                  <el-link type="primary" :underline="false">找回密码</el-link>
                  <el-link type="primary" :underline="false">注册账号</el-link>
                  <el-link type="primary" :underline="false">意见反馈</el-link>
                </div>

                <div class="auth-notice">
                  <el-checkbox v-model="selectAll">全选QQ邮箱将获取以下权限：</el-checkbox>
                  <ul>
                    <li><el-checkbox v-model="permission1">使用你的QQ头像、昵称信息</el-checkbox></li>
                    <li><el-checkbox v-model="permission2">你的QQ好友关系</el-checkbox></li>
                  </ul>
                  <p class="agreement">授权即同意<el-link type="primary" :underline="false">服务协议</el-link>和<el-link
                      type="primary" :underline="false">QQ隐私保护指引</el-link></p>

                  <el-checkbox v-model="autoLogin">下次自动登录</el-checkbox>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('qq')
const account = ref('')
const password = ref('')
const autoLogin = ref(false)
const selectAll = ref(false)
const permission1 = ref(false)
const permission2 = ref(false)

const handleTabClick = (tab) => {
  console.log('切换到:', tab.props.name)
}
</script>

<style scoped lang="scss">
.content_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: rgb(255, 255, 255); // 修正颜色写法

  .login-content {
    display: flex;
    align-items: center;
    gap: 0; // 改用margin控制间距
    max-width: 1200px;
    width: 90%;
    padding: 20px;

    .login-picture {
      flex: 1;
      max-width: 600px;
      height: 400px;
      margin-right: 60px; // 控制图片与表单间距
      background-image: url(https://rescdn.qqmail.com/zh_CN/htmledition/images/tg-mj1e9c5d.jpg);
      background-size: cover;
      background-position: center;
      border-radius: 8px;
    }

    .login-tab {
      flex: none; // 关键修改
      width: 400px;
      height: 550px;

      .login-box {
        width: 100%;
        height: 100%; // 继承高度
        padding: 30px;
        background: #fff;
        border-radius: 8px;
        border: 1px solid lightgray;
        box-sizing: border-box; // 关键修改

        // 统一高度容器
        .fixed-height {
          height: 460px;
          display: flex;
          flex-direction: column;
        }

        .qr-code-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;

          .wrp-code {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;

            img {
              width: 180px;
              height: 180px;
              border-radius: 2px;
              border: none;
            }
          }

          .qr-tip {
            margin-top: 5px;
            color: #666;
            font-size: 14px;
            text-align: center;
            line-height: 1.5;
          }
        }

        .login-header {
          margin-bottom: 20px;

          h3 {
            font-size: 18px;
            margin-bottom: 8px;
            color: #333;
            text-align: center;
          }

          .quick-login-tip {
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
            text-align: center;
          }
        }

        .login-form {
          .el-form-item {
            margin-bottom: 16px;
          }

          .login-btn {
            width: 100%;
            margin-top: 10px;
          }
        }

        .login-actions {
          display: flex;
          justify-content: center;
          gap: 15px;
          margin: 15px 0;

          .el-link {
            font-size: 12px;
          }
        }

        .auth-notice {
          margin-top: auto;
          padding: 15px;
          border-radius: 4px;
          font-size: 12px;

          .el-checkbox {
            margin-right: 0;
            color: #666;
          }

          ul {
            padding-left: 24px;
            margin: 8px 0;
            color: #666;

            li {
              line-height: 1.8;
              list-style-type: none;

              .el-checkbox {
                display: flex;
                align-items: center;
              }
            }
          }

          .agreement {
            color: #999;
            margin: 10px 0;

            .el-link {
              font-size: 12px;
            }
          }
        }
      }

      :deep(.el-tabs__item) {
        font-size: 16px;
        padding: 0 20px;
      }

      :deep(.el-tabs__nav-wrap::after) {
        height: 1px;
        background-color: #e4e7ed;
      }

      :deep(.el-tabs__content) {
        overflow: hidden;
        /* 防止内容溢出 */
      }
    }
  }
}
</style>
